This appendix details the different kinds of value that various properties of elements can take in Layout Master. The kinds of value we are concerned with are
Backgrounds and borders can be assigned colors. Color values can be specified in one of three ways:
There are 16 color keywords, taken from the windows color palette (that is why Mac users think they look so unattractive :-)
These keywords are
There is no exactly defined rgb value for these keywords, it is up to the browser developers to decide what they might mean.
For whatever reason, the original web palette (officially sRGB) used hexadecimal numbers (base 16 not base 10 numbers, and if you don't know, don't worry about it) for specifying colors. Very quickly, these RGB colors are specified as a combination of Red Green and Blue. There can be 256 different hues of each color, (from 00 to FF - that's 0 to 255 in human speak).
Layout Master allows you to specify colors using this method, in the following forms:
1) The # symbol, followed by three hexadecimal numbers in the range 00 to FF. For example, #FFCC11. This is the way HTML developers know how to specify color. In this example, the red value is FF, the green value is CC and the blue value is 11.
2) The # symbol followed by three hexadecimal numbers, this time using a single digit. For example, #FC1. This is the same number as the one in the previous example, not the same as #F0C010.
Because humans are generally more comfortable counting to 10 than 16, CSS lets us use decimal rgb values. The color gamut (the total range of colors) is exactly the same, we are just specifying it in a different way.
There are two forms of this value, a numerical and a percentage form. They are interchangeable.
1) The numerical form of the color value is the following rgb(255, 255, 0). There are three numerical values, in the range from 0 to 255, one each for red, green and blue.
2) The percentage form of the rgb color value replaces the values in the range from 0 to 255 with a percentage value from 0 to 100%. For example, the above value would be written rgb(100%, 100%, 0%).
To recap, the following values are all equivalent:
green
#00FF00
#0F0
rgb(0, 255, 0)
rgb(0%, 100%, 0%)
Length values can be positive or negative, have a numerical value, and are followed by a unit of measurement. Note that while length values can be either positive or negative, several properties cannot have negative length units.
There are two basic kinds of length unit, relative and absolute. As a rule of thumb, absolute units should be used only when the physical characteristics of the output device are known. This means that units like points and pixels should be avoided for monitors (because we can not be sure of the logical resolution (Macintoshes default to 72dpi, Windows to 96dpi), or screen sizes).
Instead of using a unit of measurement, for many properties you can use percentage values. Usually percentage values specify a percentage of the parent, or container element.
For example, specifying a width property with a percentage value means the width of an element will be that percentage of the element which contains it. For instance, p {width: 75%} means that paragraphs will be 75% the width of their container. Very often this means the body.
Percentages are very valuable with positioning, as when a user resizes their window, the same basic layout can be achieved for the new window size.
The form of a percentage unit is a positive or negative sign (no sign means positive units), followed by a number, followed be the percentage sign: %. For example -25%, +15% or 15%.
Background images and list item images are specified with a URL. This url can be either absolute (that is, the full URL, e.g http://www.westciv.com/gifs/main.gif) or a relative path. But relative to what? If you were to think about it for a moment, you'd realize that it must be relative to the style sheet. Otherwise, the style sheet would only work for web pages in the same directory as it is. The problem is that Netscape Navigator 4.x gets this wrong, and treats the URL as relative to the web page! This is rectified in Netscape 6, but needs to be kept in mind when working with Netscape 4. This bug can actually be used to advantage to "hide" style sheets from Netscape 4, but have them accessible to any other browsers.
URLs have a straightforward form:
url(the url)
Absolute URLs are written like this: url(http://www.westciv.com/gifs/main.gif)
Relative URLs, similarly, are written: url(../gifs/main.gif)
